<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>保养任务详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/style/admin.css" media="all">
    <style>
        #layer-images img {
            width: 160px;
            height: 160px;
            margin: 5px;
        }
    </style>
</head>
<body>

<div class="layui-fluid" id="LAY-app-message">
    <div class="layui-card">
        <div class="layui-card-header">基本信息</div>
        <div class="layui-card-body">
            <form class="layui-form" action="#" lay-filter="maintain-task-item-form">
                <input type="hidden" name="id">
                <div class="layui-row">
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                        <div class="layui-form-item">
                            <label class="layui-form-label">建筑群</label>
                            <div class="layui-input-block">
                                <input type="text" name="tunnel" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div id="layer-area" class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                        <div class="layui-form-item">
                            <label class="layui-form-label">区域</label>
                            <div class="layui-input-block">
                                <input type="text" name="area" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div id="layer-device-system" class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                        <div class="layui-form-item">
                            <label class="layui-form-label">设备系统</label>
                            <div class="layui-input-block">
                                <input type="text" name="deviceSystem" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div id="layer-device-code" class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                        <div class="layui-form-item">
                            <label class="layui-form-label">设备代号</label>
                            <div class="layui-input-block">
                                <input type="text" name="deviceCode" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div id="layer-device-name" class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                        <div class="layui-form-item">
                            <label class="layui-form-label">设备名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="deviceName" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                        <div class="layui-form-item">
                            <label class="layui-form-label">开始时间</label>
                            <div class="layui-input-block">
                                <input type="text" name="startTime" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                        <div class="layui-form-item">
                            <label class="layui-form-label">结束时间</label>
                            <div class="layui-input-block">
                                <input type="text" name="endTime" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">保养情况</label>
                            <div class="layui-input-block">
                                <textarea readonly class="layui-textarea" name="completion"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">审核意见</label>
                            <div class="layui-input-block">
                                <textarea class="layui-textarea" name="auditComment" id="audit-comment"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                        <div class="layui-form-item">
                            <label class="layui-form-label">审核结果</label>
                            <div class="layui-input-block">
                                <input type="text" name="auditResultText" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                        <div class="layui-form-item">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-block">
                                <input type="text" name="stateText" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-header">保养内容</div>
        <div class="layui-card-body">
            <div id="layer-task-items"></div>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-header">审核照片（共<span id="imgs-count"></span>张）</div>
        <div class="layui-card-body">
            <div id="layer-images"></div>
        </div>
    </div>
    <div id="operation-btns" style="text-align: center;display: none;">
        <button id="audit-btn1" class="layui-btn">通过</button>
        <button id="audit-btn2" class="layui-btn layui-btn-primary">不通过</button>
    </div>
</div>
<script id="content-tpl" type="text/html">
    <div class="layui-collapse">
        {{# layui.each(d, function(i, item){ }}
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">{{item.name}}</h2>
            <div class="layui-colla-content layui-show">
                <ul>
                    {{# layui.each(item.entries, function(j, entry){ }}
                    <li>{{# if(entry.checked){ }}【√】{{# } else { }} 【×】{{# } }}{{entry.name}}</li>
                    {{# }); }}
                </ul>
            </div>
        </div>
        {{# }); }}
        {{# if(d.length === 0){ }}
        暂无流数据
        {{# } }}
    </div>
</script>
<script src="/layui/layui.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/common.js"></script>
<script>
    layui.config({
        base: '/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'form', 'laytpl', 'util'], function () {
        var $ = layui.$;
        var form = layui.form;
        var laytpl = layui.laytpl;
        var id = getParam('id');

        layui.util.fixbar();

        loadForm(id);

        function loadForm(id) {
            $.get('maintain-task-items/' + id, function (result) {
                var data = result.data;
                form.val('maintain-task-item-form', data);
                if(data.state == 3){
                    $('#operation-btns').show();
                }
                if(data.unit == 1){
                    $('#layer-area').hide();
                    $('#layer-device-system').hide();
                    $('#layer-device-code').hide();
                    $('#layer-device-name').hide();
                }else if(data.unit == 2){
                    $('#layer-device-system').hide();
                    $('#layer-device-code').hide();
                    $('#layer-device-name').hide();
                }else if(data.unit == 3){
                    $('#layer-area').hide();
                }
                $.get('/maintain-task-items', {maintainTaskId: data.id}, function (res) {
                    var tpl = $('#content-tpl').html();
                    laytpl(tpl).render(JSON.parse(data.content), function (html) {
                        $('#layer-task-items').html(html);
                    });
                    $('.maintain-item').on('click', function () {
                        showMaintainTaskItem($(this).data('id'));
                    });
                });
                //加载上传图片
                if (data.imgs) {
                    var images = data.imgs.split(',');
                    $("#layer-images").empty();
                    for (var i in images) {
                        var img = images[i];
                        var item = '<img layer-src="/img/' + img + '" src="/img/' + img + '">';
                        $('#layer-images').append(item);
                    }
                    $('#imgs-count').text(images.length);
                    layer.photos({
                        photos: '#layer-images',
                        anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
                    });
                }
            });
        }

        function showMaintainTaskItem(id) {
            layer.open({
                title: '保养任务子项',
                type: 2,
                content: 'maintain-task-item.html?id=' + id,
                area: ['640px', '540px'],
                maxmin: true
            });
        }

        function audit(auditResult){
            let auditComment = $('#audit-comment').val();
            if (auditResult == 2 && !auditComment) {
                layer.msg('输入审核意见');
                return;
            }
            $.post('/maintain-task-items/audit', {
                maintainTaskItemId: id,
                auditResult: auditResult,
                auditComment: auditComment || ''
            }, function() {
                $('#operation-btns').hide();
            });
        }

        $('#audit-btn1').on('click',function(){
            audit(1);
        });

        $('#audit-btn2').on('click',function(){
            audit(2);
        });
    });
</script>
</body>
</html>